<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/homepage.css">
    <script src="js/jquery-1.9.0.min.js"></script>
</head>
<body>
<div class="haedtop">
    <div class="top">
        <div class="left">
            <span class="spana"><a href="#">无限道生态</a></span>
            <span class="spanb"><a href="#">添加到桌面</a></span>
        </div>
        <div class="right">
            <span><a href="login.html">登录</a></span>
            <span><a href="register.html">注册</a></span>
        </div>
    </div>
    <div class="body">
        <div class="logo">
        </div>
        <div class="search">
            <div class="bound">
                <input class="myinput" placeholder="请输入文字">
            </div>
        </div>
        <div class="sublist">
            <div class="sub1">
                <span class="subspan1">新品尝鲜</span>
                <span class="subspan2">海量商品</span>
            </div>
            <div class="sub2">
                <span class="subspan1">全额退款</span>
                <span class="subspan2">未达成全额退</span>
            </div>
            <div class="sub3">
                <span class="subspan1">全国包邮</span>
                <span class="subspan2">部分满意除外</span>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="footleft">
            <span><a href="homepage.html">首页</a></span>
            <span><a href="broswerproject.html">项目浏览</a></span>
            <span><a href="userinfo.html">我的众筹</a></span>
        </div>
        <div class="footright">
            <div class="hou1"><span class="spanbackground1"><a href="sponsorproject.html">发起项目</a></span></div>
            <div class="hou2"><span class="spanbackground2"><a href="help.html">新手帮助</a></span></div>
        </div>
    </div>
</div>
<div class="hpbody">
    <div class="head">
        <div class="imgbar">
            <div class="btn">
                <div class="last"></div>
                <div class="next"></div>
            </div>
            <div class="spot">
                <div class="dot1" style="background-color:#00ABEE " id="dot1"></div>
                <div class="dot1" id="dot2"></div>
                <div class="dot1" id="dot3"></div>
            </div>
        </div>
    </div>
    <div class="title">
        <div class="line"></div>
        <div class="text"><span class="span1">免费试用</span><span class="span2">Free  Trial</span></div>
        <div class="line"></div>
    </div>
    <div class="imgad">
        <div class="adver bg1">
            <span class="top">智能黑曜石手链</span>
            <span class="mid">懂你的智能能首饰小巧精致的智能配饰</span>
            <div class="realadimg bg1">
                <div style="height: 70px; width: 100%;"></div>
                <div class="divbg">
                    <div style="width: 100%;height: 25px"></div>
                    <a href="#" class="btn">立即申请</a>
                </div>
            </div>
        </div>
        <div class="adver bg2">
            <span class="top">智能黑曜石手链</span>
            <span class="mid">懂你的智能能首饰小巧精致的智能配饰</span>
            <div class="realadimg bg2">
                <div style="height: 70px; width: 100%;"></div>
                <div class="divbg">
                    <div style="width: 100%;height: 25px"></div>
                    <a href="#" class="btn">立即申请</a>
                </div>
            </div>
        </div>
        <div class="adver bg3">
            <span class="top">智能黑曜石手链</span>
            <span class="mid">懂你的智能能首饰小巧精致的智能配饰</span>
            <div class="realadimg bg3">
                <div style="height: 70px; width: 100%;"></div>
                <div class="divbg">
                    <div style="width: 100%;height: 25px"></div>
                    <a href="#" class="btn">立即申请</a>
                </div>
            </div>
        </div>
        <div class="adver bg4">
            <span class="top">智能黑曜石手链</span>
            <span class="mid">懂你的智能能首饰小巧精致的智能配饰</span>
            <div class="realadimg bg4">
                <div style="height: 70px; width: 100%;"></div>
                <div class="divbg">
                    <div style="width: 100%;height: 25px"></div>
                    <a href="#" class="btn">立即申请</a>
                </div>
            </div>
        </div>
    </div>
    <div class="title">
        <div class="line" style="width: 25%"></div>
        <div class="text" style="width: 35%"><span class="span1" style="width: 150px">热门推荐</span><span class="span2" style="width: 300px">Popular Recommendation</span></div>
        <div class="line" style="width: 25%"></div>
    </div>
    <div class="recommendation bg1">
        <div class="content">
            <div class="top tag1">
                <span class="tspan">迪奥（Dior）幽蓝魅惑五色眼影</span>
                <span class="bspan">迪奥（Dior）设计师幽蓝魅惑五色眼影5.7g，
                    五款不同质地的眼影，光亮、浓郁兼而有之，
                    置于一盒之中，通过上妆，即可幻变出各式眼妆。 以中心色为基调，
                    逐一对应专业彩妆师惯用的五个上妆基本步骤，
                    将众人视线引向你的双眸，绽现生动无比的个性眼妆。
                </span>
            </div>
            <div class="mid">
                <div class="top">
                    <span style="margin-left: 20px">已筹集<span style="color: #0f0f0f;font-size: 1.4em;">￥3990</span></span>
                    <span style="margin-left: 100px">已支持<span style="color: #0f0f0f;font-size: 1.4em;">326人</span></span>
                    <span style="margin-left: 100px;margin-right: 20px">剩余时间<span style="color: #0f0f0f;font-size: 1.4em;">5天</span></span>
                </div>
                <div class="bbarbg">
                    <div class="bar"></div>
                </div>
            </div>
            <div class="below">
                <span class="lspan">达成率：<span style="color: rgb(225, 86, 32); font-size: 1.5em">78%</span></span>
                <a href="#" class="rimg"></a>
            </div>
        </div>
    </div>
    <div class="recommendation bg2">
        <div class="content">
            <div class="top tag1">
                <span class="tspan">迪奥（Dior）幽蓝魅惑五色眼影</span>
                <span class="bspan">迪奥（Dior）设计师幽蓝魅惑五色眼影5.7g，
                    五款不同质地的眼影，光亮、浓郁兼而有之，
                    置于一盒之中，通过上妆，即可幻变出各式眼妆。 以中心色为基调，
                    逐一对应专业彩妆师惯用的五个上妆基本步骤，
                    将众人视线引向你的双眸，绽现生动无比的个性眼妆。
                </span>
            </div>
            <div class="mid">
                <div class="top">
                    <span style="margin-left: 20px">已筹集<span style="color: #0f0f0f;font-size: 1.4em;">￥3990</span></span>
                    <span style="margin-left: 100px">已支持<span style="color: #0f0f0f;font-size: 1.4em;">326人</span></span>
                    <span style="margin-left: 100px;margin-right: 20px">剩余时间<span style="color: #0f0f0f;font-size: 1.4em;">5天</span></span>
                </div>
                <div class="bbarbg">
                    <div class="bar" style="width: 0%"></div>
                </div>
            </div>
            <div class="below">
                <span class="lspan">达成率：<span style="color: rgb(225, 86, 32); font-size: 1.5em">0%</span></span>
                <a href="#" class="rimg"></a>
            </div>
        </div>
    </div>
    <div class="recommendation bg3">
        <div class="content">
            <div class="top tag1">
                <span class="tspan">迪奥（Dior）幽蓝魅惑五色眼影</span>
                <span class="bspan">迪奥（Dior）设计师幽蓝魅惑五色眼影5.7g，
                    五款不同质地的眼影，光亮、浓郁兼而有之，
                    置于一盒之中，通过上妆，即可幻变出各式眼妆。 以中心色为基调，
                    逐一对应专业彩妆师惯用的五个上妆基本步骤，
                    将众人视线引向你的双眸，绽现生动无比的个性眼妆。
                </span>
            </div>
            <div class="mid">
                <div class="top">
                    <span style="margin-left: 20px">已筹集<span style="color: #0f0f0f;font-size: 1.4em;">￥3990</span></span>
                    <span style="margin-left: 100px">已支持<span style="color: #0f0f0f;font-size: 1.4em;">326人</span></span>
                    <span style="margin-left: 100px;margin-right: 20px">剩余时间<span style="color: #0f0f0f;font-size: 1.4em;">5天</span></span>
                </div>
                <div class="bbarbg">
                    <div class="bar" style="width: 100%"></div>
                </div>
            </div>
            <div class="below">
                <span class="lspan">达成率：<span style="color: rgb(225, 86, 32); font-size: 1.5em">100%</span></span>
                <a href="#" class="rimg"></a>
            </div>
        </div>
    </div>
    <div class="recommendation bg4">
        <div class="content">
            <div class="top tag1">
                <span class="tspan">迪奥（Dior）幽蓝魅惑五色眼影</span>
                <span class="bspan">迪奥（Dior）设计师幽蓝魅惑五色眼影5.7g，
                    五款不同质地的眼影，光亮、浓郁兼而有之，
                    置于一盒之中，通过上妆，即可幻变出各式眼妆。 以中心色为基调，
                    逐一对应专业彩妆师惯用的五个上妆基本步骤，
                    将众人视线引向你的双眸，绽现生动无比的个性眼妆。
                </span>
            </div>
            <div class="mid">
                <div class="top">
                    <span style="margin-left: 20px">已筹集<span style="color: #0f0f0f;font-size: 1.4em;">￥3990</span></span>
                    <span style="margin-left: 100px">已支持<span style="color: #0f0f0f;font-size: 1.4em;">326人</span></span>
                    <span style="margin-left: 100px;margin-right: 20px">剩余时间<span style="color: #0f0f0f;font-size: 1.4em;">5天</span></span>
                </div>
                <div class="bbarbg">
                    <div class="bar" style="width: 0%"></div>
                </div>
            </div>
            <div class="below">
                <span class="lspan">达成率：<span style="color: rgb(225, 86, 32); font-size: 1.5em">0%</span></span>
                <a href="#" class="rimg"></a>
            </div>
        </div>
    </div>
    <div class="recommendation bg5">
        <div class="content">
            <div class="top tag1">
                <span class="tspan">迪奥（Dior）幽蓝魅惑五色眼影</span>
                <span class="bspan">迪奥（Dior）设计师幽蓝魅惑五色眼影5.7g，
                    五款不同质地的眼影，光亮、浓郁兼而有之，
                    置于一盒之中，通过上妆，即可幻变出各式眼妆。 以中心色为基调，
                    逐一对应专业彩妆师惯用的五个上妆基本步骤，
                    将众人视线引向你的双眸，绽现生动无比的个性眼妆。
                </span>
            </div>
            <div class="mid">
                <div class="top">
                    <span style="margin-left: 20px">已筹集<span style="color: #0f0f0f;font-size: 1.4em;">￥3990</span></span>
                    <span style="margin-left: 100px">已支持<span style="color: #0f0f0f;font-size: 1.4em;">326人</span></span>
                    <span style="margin-left: 100px;margin-right: 20px">剩余时间<span style="color: #0f0f0f;font-size: 1.4em;">5天</span></span>
                </div>
                <div class="bbarbg">
                    <div class="bar" style="width:  100%"></div>
                </div>
            </div>
            <div class="below">
                <span class="lspan">达成率：<span style="color: rgb(225, 86, 32); font-size: 1.5em">100%</span></span>
                <a href="#" class="rimg"></a>
            </div>
        </div>
    </div>
</div>
<div class="tail">
    <div class="left">
        <div class="top">
            <div class="bg1 div_l"><span class="spana">发起人创建项目</span></div>
            <div class="divarrow"><span > > </span></div>
            <div class="bg2 div_l"><span class="spana">项目获得支持</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg3 div_l"><span class="spana">发起人发放回报</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg4 div_l"><span class="spana">用户得到回报</span></div>
        </div>
        <div class="below">
            <span>关于我们</span><span>|</span>
            <span>服务条款</span><span>|</span>
            <span>项目教程</span><span>|</span>
            <span>新手帮助</span><span>|</span>
            <span>常见问题</span><span>|</span>
            <span>意见反馈</span>
        </div>
    </div>
    <div class="mid">
        <div class="weichat">
            <span>微信公众号</span>
            <img src="images/foot_ewm_05.png">
        </div>
    </div>
    <div class="right">
        <div class="div1"><span>联系我们（9:00 － 18:00）</span></div>
        <div class="div2"><span>400-000-0000</span></div>
        <div class="div3"><span>wuxiandao@zhongchou.com</span></div>
        <div class="div4"><span>qq群：123456789</span></div>
    </div>
</div>
<div class="copyright">
    <span>@版权所有</span>
</div>
</body>
</html>
<script>
    var index=0;
    function  changebg(id){
        if(id=="dot1"){
            $(".hpbody .head").css("background-image","url(images/banner_bg1.jpg)");
            $(".hpbody .head .imgbar").css("background-image","url(images/banner_img1.png)");
            index=0;
        }else if(id=="dot2"){
            $(".hpbody .head").css("background-image","url(images/banner_bg2.jpg)");
            $(".hpbody .head .imgbar").css("background-image","url(images/banner_img2.png)");
            index=1;
        }else if(id=="dot3"){
            $(".hpbody .head").css("background-image","url(images/banner_bg3.jpg)");
            $(".hpbody .head .imgbar").css("background-image","url(images/banner_img3.png)");
            index=2;
        }
    }

    $(function () {
        $(".spot .dot1").click(function () {
            $(".spot .dot1").css("background-color","#b2b2b2");
            $(this).css("background-color","#00ABEE");
            var id=$(this).attr("id");
            changebg(id);
        });

        function dot(i){
            var id="#dot"+i;
            $(".spot .dot1").css("background-color","#b2b2b2");
            $(id).css("background-color","#00ABEE")
            changebg("dot"+i);
        }

        $(".imgbar .btn .last").click(function () {
            index=index==0?2:index-1;
            dot(index+1);
        });

        $(".imgbar .btn .next").click(function () {
            index=index==2?0:index+1;
            dot(index+1);
        });

        $(".recommendation .content .below .rimg").mousedown(function () {
            $(this).css("background-position","0px -40px");
        });

        $(".recommendation .content .below .rimg").mouseup(function () {
            $(this).css("background-position","0px 0px");
        });
    });
</script>